<!--
 * @Author: LiuYan
 * @Date: 2023-01-04 11:47:10
 * @LastEditors: LiuYan
 * @LastEditTime: 2023-01-05 10:29:40
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./common/css/coommon.css" />
  </head>
  <body>
    <div class="additionalMaterial" id="app">
      <br />
      <div class="input-group">
        <label><span style="color: red">*</span>设备名称:</label>
        <input prop="test_1" style="width: 88%" placeholder="" />
      </div>
      <div class="input-group">
        <label><span style="color: red">*</span>型号:</label>
        <input prop="test_2" style="width: 88%" placeholder="" />
      </div>
      <div class="flex" style="width: 98%">
        <div class="select-group" style="width: 100%">
          <label>类型:</label>
          <div class="options" style="width: 98%">
            <input placeholder="" style="width: 100%" />
            <ul>
              <li>输入关键字</li>
              <li>输入关键字</li>
              <li>输入关键字</li>
              <li>输入关键字</li>
            </ul>
          </div>
        </div>
        <div class="select-group" style="width: 100%">
          <label>标签分类:</label>
          <div class="options" style="width: 98%">
            <input prop="test_3" style="width: 100%" placeholder="" />
            <ul>
              <li>输入关键字</li>
              <li>输入关键字</li>
              <li>输入关键字</li>
              <li>输入关键字</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="select-group" style="width: 100%">
        <label>品牌:</label>
        <div class="options" style="width: 88%">
          <input prop="test_4" style="width: 100%" placeholder="" />
          <ul>
            <li>输入关键字</li>
            <li>输入关键字</li>
            <li>输入关键字</li>
            <li>输入关键字</li>
          </ul>
        </div>
      </div>
      <div class="input-group">
        <label>单位:</label>
        <input prop="test_5" style="width: 88%" placeholder="" />
      </div>
      <div class="select-group" style="width: 100%">
        <label>供应商:</label>
        <div class="options" style="width: 88%">
          <input prop="test_6" style="width: 100%" placeholder="" />
          <ul>
            <li>输入关键字</li>
            <li>输入关键字</li>
            <li>输入关键字</li>
            <li>输入关键字</li>
          </ul>
        </div>
      </div>
      <div class="flex" style="width: 100%">
        <div class="input-group">
          <label>联系人:</label>
          <input prop="test_7" style="width: 77%" placeholder="" />
        </div>
        <div class="input-group">
          <label>联系方式:</label>
          <input prop="test_8" style="width: 77%" placeholder="" />
        </div>
      </div>
      <div class="input-group">
        <label>最新成本价:</label>
        <input prop="test_9" style="width: 88%" placeholder="" />
      </div>
      <div class="input-group">
        <label>备注说明:</label>
        <input style="width: 88%" placeholder="" />
      </div>
      <div style="display: flex">
        <div class="input-group" style="width: 10%">
          <label>设备图片:</label>
        </div>
        <button @click="uploading_1" class="button_primary">上传文件</button>
        <input prop="test_10" style="display: none" v-model="url_1" />{{url_1}}
      </div>
      <p class="text">支持扩展名：.pdf .jpg...</p>
      <div style="display: flex">
        <div class="input-group" style="width: 10%">
          <label>设备三证:</label>
        </div>
        <button @click="uploading_2" class="button_primary">上传文件</button>
        <input style="display: none" v-model="url_2" />{{url_2}}
      </div>
      <p class="text">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p>
    </div>
  </body>
  <script src="./common/js/vue.js"></script>
  <script type="module">
    import PropsForm from "./common/js/propsForm.js";
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          url_1: "",
          url_2: "",
        };
      },
      methods: {
        uploading_1() {
          const input = document.createElement("input");
          input.type = "file";
          document.body.appendChild(input);
          input.click();
          // 上传结束之后，删除此图标
          input.remove();
          input.onchange = function (val) {
            const filePath = val.target.files[0];
            const formData = new FormData();
            formData.append("file", filePath);
            // ajax之后在赋值
            this.url_1 = filePath.name;
          }.bind(this);
        },
        uploading_2() {
          const input = document.createElement("input");
          input.type = "file";
          document.body.appendChild(input);
          input.click();
          // 上传结束之后，删除此图标
          input.remove();
          input.onchange = function (val) {
            const filePath = val.target.files[0];
            const formData = new FormData();
            formData.append("file", filePath);
            // ajax之后在赋值
            this.url_2 = filePath.name;
          }.bind(this);
        },
      },
    }).mount("#app");
    function save() {
      let propForm = new PropsForm({
        el: document.querySelector("#app"),
      });
      return propForm.form;
    }
    window.save = save;
  </script>
</html>
